<template>
  <div>
    <el-table v-loading="isLoading" :data="userDatas" stripe border fit style="width: 100%">
      <el-table-column width="100px" prop="id" label="编号"></el-table-column>
      <!--      <el-table-column label="头像">-->
      <!--      </el-table-column>-->
      <el-table-column prop="userName" label="账号"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="tel" label="手机号"></el-table-column>
      <el-table-column prop="level" label="等级"></el-table-column>
      <el-table-column prop="created_at" :formatter="formatterDate" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <el-button type="primary" :icon="Edit">编辑</el-button>
        <el-button type="danger" :icon="Delete">删除</el-button>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          small
          background
          layout="prev,pager,next"
          :total="pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
      />
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {GetAllUserList} from "@/api/UserManager";
import {Delete,Edit} from '@element-plus/icons-vue';
let currentPage = ref(1);
const pagesize = ref(10);
let userDatas = ref([]);
const isLoading = ref(true);

function formatterDate(row, column, cellValue, index) {
  const daterc = row[column.property]
  if (daterc) {
    if (daterc.indexOf('T') === -1) return daterc
    const arr = daterc.split('T')
    const d = arr[0]
    const darr = d.split('-')
    const t = arr[1]
    const tarr = t.split('.000')
    const marr = tarr[0].split(':')
    const dd = darr[0] + '-' + darr[1] + '-' + darr[2] + ' ' + marr[0] + ':' + marr[1] + ':' + marr[2].substring(0, 2)
    return dd
  }
}

onMounted(() => {
  handleGetUserPage();
})

function handleSizeChange(size) {
  console.log(size)
}

function handleCurrentChange(page) {
  currentPage.value = page;
  handleGetUserPage();
}

function handleGetUserPage() {
  GetAllUserList(currentPage.value, 10).then(response => {
    userDatas.value = response.rows;
    pagesize.value = response.total;
    setInterval(() => {
      isLoading.value = false;
    }, 1000)
  })
}
</script>

<style scoped>
.pagination {
  display: flex;
  margin: 20px;
  justify-content: center;
}
</style>